<template>
  <d2-container>

    <template slot="header">

      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-width="auto" label-position="left" :inline="true">
        <el-form-item label="销售员" size="mini">
          <el-select v-model="mainQuery.salesId" size="small" clearable>
            <el-option v-for="item in salesOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="月份" size="mini">
          <el-date-picker v-model="mainQuery.statMonth" value-format="yyyy-MM" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="success" @click="handleBindMch" :loading="mainTable.loading" size="mini" v-if="
                $options.filters['checkButtonAccess'](
                  'commissionSales-bindMch'
                )
              ">关联商户</el-button>
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="fetchMainData" :loading="mainTable.loading" size="mini">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud ref="d2Crud" @custom-emit-handle-trans="handleTrans" :options="mainTable.options" :index-row="mainTable.indexRow" :rowHandle="mainTable.rowHandle" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :loading="mainTable.loading" @current-change="onMainCurrentChange" @selection-change=""></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

    <dialog-trans ref="dialog-trans" @dialog-close="fetchMainData"></dialog-trans>

    <dialog-bind-mch ref="dialog-bind-mch" @dialog-close="fetchMainData"></dialog-bind-mch>
  </d2-container>
</template>

<script>

import { dbGet } from '@/libs/util.db';
import { checkButtonAccess } from '@/filters';
import ApiMain from '@/api/commission.stat';
import MemberApiMain from '@/api/system.member';
import  dialogTrans from './dialog-trans'
import  dialogBindMch from './dialog-bind-mch'
export default {
  name: 'sale-commission',
  mixins: [
  ],
  components: {
    dialogTrans,
    dialogBindMch
  },
  data() {
    return {

      mainQuery: {
        salesId: '',
        statMonth: [],
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '销售员', key: 'salesName', align: 'center', showOverflowTooltip: true, width: 150 },
          { title: '销售级别', key: 'level', align: 'center', showOverflowTooltip: true, width: 150 },
          { title: '统计年份', key: 'statYear', align: 'center', showOverflowTooltip: true },
          { title: '统计月份', key: 'statMonth', align: 'center', showOverflowTooltip: true },
          { title: '商户号', key: 'mchNo', align: 'center', showOverflowTooltip: true },
          { title: '成功笔数', key: 'successCount', align: 'center', showOverflowTooltip: true },
          {
            title: '成功交易结算金额', key: 'settleAmount', align: 'center', showOverflowTooltip: true, width: 150, formatter: (row, col, val, i) => {
              return val / 100;
            }
          },
          {
            title: '手续费', key: 'serviceFee', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, i) => {
              return val / 100;
            }
          },
          { title: '提成比例', key: 'commissionRate', align: 'center', showOverflowTooltip: true, width: 100, formatter: (row, col, val, i) => {
              return (val / 100) + '%';
            }
          },
          { title: '提成金额', key: 'commission', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, i) => {
              return row.settleCurrency + ' ' + (val / 100);
            }
          },
          { title: '提现状态', key: 'strTransStatus', align: 'center', showOverflowTooltip: true },
        ],
        list: [],
        rowHandle: {
          width: '120',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '发起提现',
              type: 'primary',
              size: 'mini',
              emit: 'custom-emit-handle-trans',
              show (index, row) {
                // 佣金>0 且 未体现或驳回 且 是自己
                let userId = dbGet({
                  dbName: 'sys',
                  path: 'user.info.id',
                  user: true
                });
                if ((row.commission > 0) && 
                    (row.transStatus == -1 || row.transStatus == 2 || row.transStatus == 4) && 
                    checkButtonAccess('commissionSalesTrans-add') && 
                    (row.salesId == userId) ) {
                  return true;
                } else {
                  return false;
                }
              }
            },

          ]
        },
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },

      salesOptions: [],

    }
  },
  mounted() {
    this.fetchSalesOptions();
    this.resetMainData();
  },

  methods: {
    handleTrans(res){
      this.$refs["dialog-trans"].show(res.row);
    },

    handleBindMch() {
      this.$refs["dialog-bind-mch"].show();
    },

    renderMainData(re) {

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = {
        channelId: '',
        salesId: '',
        statMonth: [],
      };

      this.fetchMainData();
    },

    fetchSalesOptions() {
      MemberApiMain.getOption({ extraType: 1 })
        .then(re => {
          this.salesOptions = re;
        })
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.listSales(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }


      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

  }
}
</script>

<style>
</style>
